import { StyleSheet, Text, View, Modal, TouchableOpacity, TextInput } from 'react-native';
import React, { useState, forwardRef, useImperativeHandle } from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import { useTranslation } from 'react-i18next';
import { px2dp, scale, width } from '~/utils/px2dp';
import { bindDoctorApi } from '~/api/acupoints';
import { userStore } from '~/store';

interface Props {
    actionCallback?: Function;
}

const AddDoctorModal = forwardRef((props: Props, ref: any) => {
    const { actionCallback } = props;
    const { t } = useTranslation();
    const [visible, setVisible] = useState(false);
    const [doctor_phone, setDoctorPhone] = useState('');
    const openModal = () => {
        setVisible(true);
    };
    const closeModal = () => {
        setVisible(false);
    };
    useImperativeHandle(
        ref,
        () => ({
            openModal,
            closeModal,
        }),
        [openModal, closeModal],
    );
    const addDoctor = () => {
        if (doctor_phone == userStore.me.email) {
            Toast.show({ content: t('doctor.t5'), layout: 'top' });
            return;
        }
        bindDoctorApi({ doctor_phone }).then((res) => {
            if (res.status == 1) {
                actionCallback && actionCallback();
                closeModal();
                Toast.show({ content: t('doctor.t3'), layout: 'top' });
            } else {
                Toast.show({ content: res.msg || t('doctor.t4'), layout: 'top' });
            }
        });
    };
    return (
        <Modal
            animationType="fade"
            visible={visible}
            transparent={true}
            statusBarTranslucent={true}
            hardwareAccelerated={true}>
            <View style={styles.modal}>
                <View style={styles.modalContainer}>
                    <View style={[styles.row, styles.between]}>
                        <View />
                        <Text style={styles.title}>{t('doctor.title')}</Text>
                        <TouchableOpacity onPress={closeModal}>
                            <Icon name={'close-sharp'} size={px2dp(40)} color={'#666666'}></Icon>
                        </TouchableOpacity>
                    </View>
                    <View style={[styles.input, styles.row]}>
                        <TextInput
                            style={styles.inputStyle}
                            placeholder={t('doctor.t1')}
                            // maxLength={11}
                            returnKeyType={'done'}
                            value={doctor_phone}
                            onChangeText={(val) => {
                                setDoctorPhone(val);
                            }}
                            placeholderTextColor={'#a4a4a4'}
                        />
                    </View>
                    <TouchableOpacity style={[styles.bt, styles.row]} onPress={addDoctor}>
                        <Text style={styles.bt_text}>{t('doctor.t2')}</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </Modal>
    );
});

export default AddDoctorModal;
const modalWidth = width * 0.84;
const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    between: {
        justifyContent: 'space-between',
    },
    modal: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.4)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalContainer: {
        width: modalWidth,
        backgroundColor: '#fff',
        borderRadius: px2dp(24),
        paddingVertical: px2dp(24),
        paddingHorizontal: px2dp(24),
    },
    title: {
        color: '#000',
        fontSize: scale(28),
        fontWeight: '500',
    },
    input: {
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: px2dp(16),
        backgroundColor: '#F6F8FA',
        paddingHorizontal: px2dp(16),
        height: px2dp(100),
        marginTop: px2dp(24),
    },
    inputStyle: {
        fontSize: scale(28),
    },
    bt: {
        justifyContent: 'center',
        backgroundColor: '#25C8C8',
        height: px2dp(80),
        marginTop: px2dp(32),
        borderRadius: px2dp(16),
    },
    bt_text: {
        color: '#fff',
        fontSize: scale(32),
        fontWeight: 'bold',
    },
});
